<template>
	<view class="start-index">
		<view v-show="currentIndex === 0" class="custom-tabbar-page">
			<home ref="home"></home>
		</view>
		<view v-show="currentIndex === 1" class="custom-tabbar-page">
			<rank ref="preferredRef"></rank>
		</view>
		<view v-show="currentIndex === 2"  class="custom-tabbar-page">
			<circle-page ref="circleRef"></circle-page>
		</view>
		<view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
		  <scroll-view 
		  class="custom-tabbar-page" 
		  scroll-y 
		  enable-back-to-top 
		  :scroll-anchoring="true"
		  :refresher-threshold="100"
		  :refresher-enabled="true"
		  :enable-back-to-top="true"
		  :refresher-triggered="triggered"
		   @refresherrefresh="refreshList" 
		   @refresherrestore="onRestore" 
		  scroll-with-animation
		  @scrolltolower="tabbarPageScrollLower">
			<mine ref="mine"></mine>
		  </scroll-view>
		</view>
		<tn-tabbar 
		  v-model="currentIndex" 
		  id="bottom-tabbar" 
		  :list="tabbarList" 
		  activeColor="#EC5446"
		  inactiveColor="#999999" 
		  activeIconColor="#FBBD12" 
		  :animation="true" 
		  :safeAreaInsetBottom="true"
		  @change="switchTabbar">
		</tn-tabbar>
	</view>
</template>

<script>
import Home from './home/daily.vue'
import CirclePage from './circle/circle.vue'
import Activity from './activity/activity.vue'
import Rank from './rank/index.vue'
import Mine from './mine/index.vue'

export default {
	components: {
		Home,
		CirclePage,
		Activity,
		Rank,
		Mine
	},
	data() {
		return {
			// 底部tabbar菜单数据
			tabbarList: [{
					title: '首页',
					activeIcon: '/static/tabbar/dinner_new.png',
					inactiveIcon: '/static/tabbar/dinner.png',
				},
				{
					title: '排行',
					activeIcon: '/static/tabbar/rank_new.png',
					inactiveIcon: '/static/tabbar/rank.png',
				},
				{
					title: '活动',
					activeIcon: '/static/tabbar/circle_new.png',
					inactiveIcon: '/static/tabbar/circle.png',
				},
				{
					title: '我的',
					activeIcon: '/static/tabbar/mine_new_a.png',
					inactiveIcon: '/static/tabbar/mine_new.png',
				}
			],
			// tabbar当前被选中的序号
			currentIndex: 0,
			triggered: false,
			tabberPageLoadFlag: []
		}
	},
	onLoad(options) {
		const index = Number(options.index || 0)
		this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
			return index === tabbar_index
		})
		this.switchTabbar(index)
	},
	onPullDownRefresh() {
	  console.log('pulldownrefresh');
	  this.refreshList();
	},
	methods: {
		// 切换导航
		switchTabbar(index) {
			this._switchTabbarPage(index)
			this.tabbarList[this.currentIndex].load = true;
			if(this.currentIndex == 0){    
			  // this.$refs.home && this.$refs.home.initPage(true)
			}
		},
		// 切换导航页面
		_switchTabbarPage(index) {
			const selectPageFlag = this.tabberPageLoadFlag[index]
			if (selectPageFlag === undefined) {
			  return
			}
			if (selectPageFlag === false) {
			  this.tabberPageLoadFlag[index] = true
			}
			this.currentIndex = index
		},
		tabbarPageScrollLower(e) {
			if (this.currentIndex === 3) {
			  this.$refs.mine.getList()
			}
		},
		refreshList() {
			this.triggered = true;
			if (this.currentIndex === 3) {
			  this.$refs.mine.refreshList()
			}
			setTimeout(() => {
			  this.triggered = false;
			}, 1000)
		},
		onRestore() {
			this.triggered = false; 
		},
	}
}
</script>

<style lang="scss" scoped>
  .custom-tabbar-page{
    height: calc(100vh - 106rpx);
    overflow: hidden;
  }
</style>